<template>
    <ContentWrap>
        <CardTitle title="EConfirmDialog 使用" />
        <code class="code-block mt-20px" >
            &lt;EConfirmDialog ref="confirmDialogRef" /&gt;<br/>
            &lt;EButton @click="showConfirm"&gt;显示确认弹框&lt;/EButton&gt;
        </code>
        <CardTitle title="EConfirmDialog 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const confirmDialogRef = ref()

const showConfirm = () => {
  confirmDialogRef.value.openDialog({
    title: '确认操作',
    content: '您确定要执行此操作吗？',
    onConfirm: () => {
      console.log('用户确认了操作')
    }
  })
}

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="EConfirmDialog 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>方法</th>
                    <th>参数</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>openDialog</td> 
                    <td>Object</td>
                    <td>打开确认弹框</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="openDialog 参数" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>title</td> 
                    <td>String</td>
                    <td>确认</td>
                    <td>弹框标题</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>String</td>
                    <td>-</td>
                    <td>弹框内容</td>
                </tr>
                <tr>
                    <td>onConfirm</td>
                    <td>Function</td>
                    <td>-</td>
                    <td>确认回调函数</td>
                </tr>
                <tr>
                    <td>onCancel</td>
                    <td>Function</td>
                    <td>-</td>
                    <td>取消回调函数</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="EConfirmDialog 示例" />
       <div class="mt-20px">
            <div class="button-group">
                <EButton @click="showBasicConfirm">基础确认弹框</EButton>
                <EButton @click="showDeleteConfirm" type="danger">删除确认弹框</EButton>
                <EButton @click="showCustomConfirm">自定义确认弹框</EButton>
                <EButton @click="showAsyncConfirm">异步确认弹框</EButton>
            </div>
            
            <EConfirmDialog ref="confirmDialogRef" />
            
            <div class="result-display" v-if="lastResult">
                <CardTitle title="操作结果" />
                <p>{{ lastResult }}</p>
            </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { eConfirm } from '@/index'
const confirmDialogRef = ref()
const lastResult = ref('')

const showBasicConfirm = () => {
  eConfirm({
    title: '确认操作',
    content: '您确定要执行此操作吗？',
    onConfirm: () => {
      lastResult.value = '用户确认了基础操作 - ' + new Date().toLocaleTimeString()
    },
    onCancel: () => {
      lastResult.value = '用户取消了基础操作 - ' + new Date().toLocaleTimeString()
    }
  })
}

const showDeleteConfirm = () => {
  eConfirm({
    title: '删除确认',
    content: '删除后数据将无法恢复，您确定要删除吗？',
    onConfirm: () => {
      lastResult.value = '用户确认了删除操作 - ' + new Date().toLocaleTimeString()
    },
    onCancel: () => {
      lastResult.value = '用户取消了删除操作 - ' + new Date().toLocaleTimeString()
    }
  })
}

const showCustomConfirm = () => {
  eConfirm({
    title: '自定义标题',
    content: '这是一个自定义内容的确认弹框，可以包含更多详细信息。',
    onConfirm: () => {
      lastResult.value = '用户确认了自定义操作 - ' + new Date().toLocaleTimeString()
    },
    onCancel: () => {
      lastResult.value = '用户取消了自定义操作 - ' + new Date().toLocaleTimeString()
    }
  })
}

const showAsyncConfirm = () => {
  eConfirm({
    title: '异步操作确认',
    content: '此操作将执行异步任务，可能需要一些时间。',
    onConfirm: async () => {
      lastResult.value = '正在执行异步操作...'
      // 模拟异步操作
      await new Promise(resolve => setTimeout(resolve, 2000))
      lastResult.value = '异步操作完成 - ' + new Date().toLocaleTimeString()
    },
    onCancel: () => {
      lastResult.value = '用户取消了异步操作 - ' + new Date().toLocaleTimeString()
    }
  })
}
</script>

<style lang="scss" scoped>
.button-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.result-display {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #f9f9f9;
    
    p {
        margin: 10px 0 0 0;
        color: #333;
        font-size: 14px;
    }
}
</style> 